import React, {useState} from 'react';
import {connect} from 'react-redux';
import {Button, Modal, Input, Form, message} from 'antd';
import axios from '../common/axios';

const Goods=Form.create({
  shopName: '',
  address: '',
  tel: '',
  opentime: ''
})(props=>{
  const {access}=props;
  const {getFieldDecorator, resetFields}=props.form;

  let [visible, setVisible]=useState(false);


  const fnOk=ev=>{
    props.form.validateFields(async (err, values)=>{
      if(!err){
        try{
          await axios.post('/goods/', values);
          message.success('添加成功');
          setVisible(false);
        }catch(e){
          console.log(e.response.data);
        }
      }
    });
  };

  return (
    <div>
      {access.goods_add?(
        <Button type="primary" onClick={()=>setVisible(true)}>添加</Button>
      ):''}

      <Modal title="添加" visible={visible} onOk={fnOk} onCancel={()=>{
        setVisible(false);
        resetFields();
      }}>
        <Form>
          <Form.Item>
            {getFieldDecorator('shopName', {
              rules: [
                {required: true, message: '店铺名称必须填写'}
              ]
            })(
              <Input type="text" placeholder="请输入店铺的名称" />
            )}
          </Form.Item>
          <Form.Item>
            {getFieldDecorator('address', {})(
              <Input type="text" placeholder="请输入店铺的地址" />
            )}
          </Form.Item>
          <Form.Item>
            {getFieldDecorator('tel', {})(
              <Input type="text" placeholder="请输入店铺的电话" />
            )}
          </Form.Item>
          <Form.Item>
            {getFieldDecorator('opentime', {})(
              <Input type="text" placeholder="请输入店铺的营业时间" />
            )}
          </Form.Item>
        </Form>
      </Modal>
    </div>
  );
})

export default connect((state,props)=>({...props, access: state.access}))(Goods);
